<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            .container{
                width: 64px;
                height: 32px;
                position: relative;
                box-sizing: border-box;
            }
            .power-main{
                width: 60px;
                height: 32px;
                border: solid 2px #222;
                border-radius: 9px;
                position: absolute;
                box-sizing: border-box;
            }
            .power-positive{
                width: 2px;
                height: 10px;
                background-color: #222;
                position: absolute;
                right: 0px;
                top: 11px;
            }
            .charging{
                width: 5px;
                background-color: red;
                height: 22px;
                position: absolute;
                top: 3px;
                left: 3px;
                border-radius: 5px;
                animation-name: charging;
                animation-duration: 10s;
                animation-delay: 2s;
                animation-iteration-count: infinite;
            }
            @keyframes charging{
                0%{
                    width: 3px;
                    background-color: red;
                }
                10%{
                    width: 6px;
                    background-color: red;
                }
                30%{
                    width: 20px;
                    background-color: orange;
                }
                50%{
                    width: 30px;
                    background-color: yellow;
                }
                60%{
                    width: 40px;
                    background-color: green;
                }
                100%{
                    width: 50px;
                    background-color: green;
                }
            }
        </style>
    </head>
<body>
    <div class="container">
        <div class="power-main">
            <div class="charging">
            </div>
        </div>
        <div class="power-positive">
        </div>
    </div>
</body>
</html>